<template>
  <div id='importVms'>
    <div style='height: 40px;'>
      <div style='float: left;'>
        <el-select v-model='pubVmId' style='width: 200px' size='mini' placeholder='请选择云平台'
                   clearable>
          <el-option v-for='option in pubVmList' :label='option.platformName' :key='option.id' :value='option.id' />
        </el-select>
        <!-- <el-select v-model='zoneId' style='width: 200px' size='mini' placeholder='请选择地域' clearable>
          <el-option v-for='option in zoneList' :label='option.localName' :key='option.regionId'
                     :value='option.regionId' />
        </el-select> -->
        <!--        <el-select v-model='importState' placeholder='请选择导入状态' size='mini' clearable>-->
        <!--          <el-option-->
        <!--            v-for='option in options'-->
        <!--            :key='option.value'-->
        <!--            :label='option.label'-->
        <!--            :value='option.value'-->
        <!--          ></el-option>-->
        <!--        </el-select>-->
        <el-button :disabled='chenkSearch()' @click='getImportVms()' type='primary' size='mini'>{{ $t('Vm.search') }}
        </el-button>
        <el-button @click='importVms()' type='primary' size='mini' :disabled='importBtnDisabled'>
          {{ $t('Vm.batchImport') }}
        </el-button>
      </div>
    </div>
    <table-contain :height.sync='table.maxHeight'>
      <el-table :data='tableData' slot='table' :height="table.maxHeight"
                ref='multipleTable' border highlight-current-row @selection-change='handleSelectionChange'>
        <el-table-column type='selection' align='center' width='55'
                         :selectable='handleTableSelectStatus'></el-table-column>
        <el-table-column prop='instanceName' :label="$t('importVm.instanceName')" min-width='100' show-overflow-tooltip
                         align='center'>
        </el-table-column>
<!--        <el-table-column prop='hostName' :label="$t('importVm.hostname')" min-width='100' show-overflow-tooltip-->
<!--                         align='center'>-->
<!--        </el-table-column>-->
        <el-table-column prop='stateName' :label="$t('importVm.stateName')" align='center' min-width='80'>
        </el-table-column>
        <el-table-column prop='ip' :label="$t('importVm.ip')" width='150' show-overflow-tooltip
                         align='center'></el-table-column>
        <el-table-column prop='cpu' :label="$t('importVm.cpu')" min-width='70' align='center'></el-table-column>
        <el-table-column prop='memory' :label="$t('importVm.memory')" min-width='70' align='center'>
          <template slot-scope="scope">
            {{ scope.row.memory / 1024 }}
          </template>
        </el-table-column>
        <el-table-column prop='regionName' :label="$t('importVm.regionName')" min-width='100'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='zoneName' :label="$t('importVm.zoneName')" min-width='100'
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop='osName' :label="$t('importVm.osName')" min-width='70' align='center'></el-table-column>
<!--        <el-table-column prop='imageName' :label="$t('importVm.imageName')" width='150' show-overflow-tooltip-->
<!--                         align='center'>-->
<!--        </el-table-column>-->
        <el-table-column prop='instanceChargeTypeName' :label="$t('importVm.instanceChargeTypeName')" min-width='80'
                         show-overflow-tooltip align='center'></el-table-column>
        <el-table-column prop='importStateName' :label="$t('importVm.importStateName')" min-width='80' align='center'
                         show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination
        slot='footer' @size-change='handleSizeChange' @current-change='handleCurrentChange'
        :current-page='currentPage' :page-sizes='[10,20,50,100,1000]' :page-size='pageSize'
        layout='total, sizes, prev, pager, next' :total='totalSize'>
      </el-pagination>
    </table-contain>
  </div>
</template>

<script>
import model from '@/public/indexModel.js'
import local from './js/local.js'
import pubVmApi from '../../../api/pubVmApi.js'
import pubCloudApi from '../../../api/pubCloudApi'

export default {
  name: 'importVms',
  mixins: [model],
  i18n: {
    messages: local
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      totalSize: 0,
      pageSize: 10,
      pubVmId: '',
      pubVmList: [],
      vdcDataList: [],
      vdcId: '',
      vmName: '',
      multipleSelection: [],
      importState: '',
      options: [
        { value: 'UN_IMPORT', label: '未导入' },
        { value: 'IMPORTED', label: '已导入' }
      ],
      vmListFilter: [{
        text: '可导入',
        value: 'IMPORT'
      }, {
        text: '不可导入',
        value: 'UNIMPORT'
      }, {
        text: '已导入',
        value: 'IMPORTED'
      }],
      filterValue: [],
      importBtnDisabled: true,
      deliverDialogVisible: false,
      businessUnitList: [],
      deliverForm: {
        businessUnitId: '',
        description: ''
      },
      platformResourceId: ''
    }
  },
  mounted() {
    this.getVpmList()
  },
  methods: {
    chenkSearch() {
      if (this.pubVmId !== '') {
        return false
      } else {
        return true
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getImportVms()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getImportVms()
    },
    importVms() {
      const self = this
      const ids = []

      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i]['instanceId'])
      }
      self.mloading.show()
      const param = {
        dataCenterId: self.pubVmId,
        platformResourceIds: ids
      }
      pubVmApi.pubVmImportRequest({
        params: param
      }).then((data) => {
        self.mloading.hide()
        this.$message({ type: 'success', message: '导入成功' })
        self.getImportVms()
      }).catch((error) => {
        self.mloading.hide()
        this.$message({ type: 'success', message: '导入失败' })
        console.error(error)
      }).then(() => {
      })
    },
    handleTableSelectStatus(row, index) {
      if (row.importState === 'UN_IMPORT') {
        return 1 || 2
      } else {
        return 0
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.importBtnDisabled = false
      } else {
        this.importBtnDisabled = true
      }
    },
    getVpmList() {
      pubCloudApi.vdcListRequest({ pageNo: 1, pageSize: 10000 }).then(({ data }) => {
        this.pubVmList = data.pageData
      })
    },
    getImportVms() {
      const self = this
      self.createDefaultMLoading('#pub')
      self.mloading.show()
      pubVmApi.getVmImportList(
        {
          pageNumber: self.currentPage,
          pageSize: self.pageSize,
          dataCenterId: self.pubVmId
        })
        .then((data) => {
          self.tableData = data.data.pageData
          self.totalSize = data.data.total
          self.mloading.hide()
        }).catch((error) => {
          self.mloading.hide()
        })
    }
  }
}
</script>

<style lang='scss'>
@import '../../../assets/iconfont/iconfont.css';

#importVms {
  & {
    height: 100%;
  }

  & .el-button + .el-button {
    margin-left: 0px;
  }

  .el-table th > .cell {
    line-height: 14px;
  }

  /*表格中的字体偏大，导致内容偏少，显示不全*/
  /*  & .el-table, & .el-link {
    font-size: 12px;
  }*/
  .vm-status-running {
    color: #21903a;
  }

  .vm-status-stopped {
    color: #f56954;
  }

  .vm-status-unknown {
    color: #55a3f5;
  }

  .vm-status-paused {
    color: #1781fa;
  }

  .vm-status-error {
    color: #cf3736;
  }

  @keyframes whirling {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .vm-status-in-progress {
    //  color: #FAAD14;
    color: #fa9700;
    display: inline-block;
    animation: whirling 1.5s linear infinite;
  }

  .vm-os {
    font-size: 20px;
  }

  .vm-os-overflow {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
